<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script src="./lodash.min.js"></script>
    <script>

        // //1.节流函数定义，传入函数参数和时间差两个形参
        // function throttle(fn, time) {
        //     // return function () {
        //     //     //4.获取当前时间now,判断now-startTime>=500
        //     //     let now = Date.now()
        //     //     if (now - startTime >= 500) {
        //     //         fn()
        //     //         startTime = now
        //     //     }

        //     // }



        //     //清空之前的定时器
        //     let timeOut = null
        //     return function () {
        //         if (!timeOut) {
        //             timeOut = setTimeout(function () {
        //                 fn()  //事件的回调函数
        //                 timeOut = null
        //             }, time)
        //         }
        //     }

        // }




        const box = document.querySelector('.box')

        let i = 1
        function mouseMove() {
            i++
            box.innerHTML = i
        }

        //1.节流函数，用于控制mouseMove在500毫秒的时间差值当中去执行
        function throttle(mouseMove, time) {
            //3-1 声明一个初始时间戳，是可变的要放在函数里面
            let startTime = 0
            return function () {
                //3-2 获取鼠标移动后的时间戳
                let now = Date.now()
                //3-3 now - timeStart >= 500 调用函数mouseMove
                if (now - startTime >= 500) {
                    mouseMove()
                    startTime = now
                }

            }

        }

        //执行绑定事件的时候，调用节流函数
        box.addEventListener('mousemove', throttle(mouseMove, 500))
        //throttle(mouseMove, 500) return一个函数就相当于，不然就只是调用一次函数
        //box.addEventListener('mousemove',function(){})

        //用lodash引入节流函数
        // box.addEventListener('mousemove', _.throttle(mouseMove, 500))





    </script>

</body>

</html>